<template>
  <div class="container clearfix">
    <scroll-view scroll-y style="height:100%">
      <div class="inner">
        <div class="top clearfix">
          <div class="top-info">
              <div class="logo">
                <div class="user-logo">
                  <img
                    :src="user_data?imgUrl+user_data.avatar:''"
                    v-if="imgUrl&&user_data.avatar"
                    alt
                    class="img"
                    mode="widthFix"
                  />
                </div>

                <img
                  :src="img_baseurl+'/mp_3.0/mine/ic_member@3x.png'"
                  v-if="img_baseurl&&user_data.is_plus==1"
                  alt
                  class="vip-icon"
                />
              </div>
              <div class="user_nickname">
                {{user_data.nickname}}
                <div class="user_tel">{{user_data.username}}</div>
              </div>
          </div>
        </div>
        <div class="page_main">
        <div class="goods-order clearfix">
          <div class="title">我的订单</div>
          <div class="all-order">
            <a href="/pages/package_mine/my_order/main?type=0">
              全部订单
              <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
            </a>
          </div>
          <div class="order-list order-list1 clearfix">
            <div class="list-item">
              <a href="/pages/package_mine/my_order/main?type=1">
                <div class="icon">
                  <img
                    src="/static/teeth/order_01.png"
                    alt
                    class="img"
                  />
                  <div
                    class="tip"
                    v-if="order_data.waitPay>0"
                  >{{order_data.waitPay>99?'99+':order_data.waitPay}}</div>
                </div>
                <div class="msg">待付款</div>
              </a>
            </div>
            <div class="list-item">
              <a href="/pages/package_mine/my_order/main?type=5">
                <div class="icon">
                  <img
                    src="/static/teeth/order_02.png"
                    alt
                    class="img"
                  />
                  <div
                    class="tip"
                    v-if="order_data.waitGet>0"
                  >{{order_data.waitGet>99?'99+':order_data.waitGet}}</div>
                </div>
                <div class="msg">待收货</div>
              </a>
            </div>
            <div class="list-item">
              <a href="/pages/package_mine/my_order/main?type=3">
                <div class="icon">
                  <img
                    src="/static/teeth/order_03.png"
                    alt
                    class="img"
                  />
                  <div class="tip">1</div>
                </div>
                <div class="msg">待评价</div>
              </a>
            </div>
            <div class="list-item">
              <a href="/pages/package_mine/my_order/main?type=3">
                <div class="icon">
                  <img
                    src="/static/teeth/order_04.png"
                    alt
                    class="img"
                  />
                  <div
                    class="tip"
                    v-if="order_data.waitComment>0"
                  >{{order_data.waitComment>99?'99+':order_data.waitComment}}</div>
                </div>
                <div class="msg">退款/售后</div>
              </a>
            </div>
          </div>
        </div>
        <div class="page_list">
           <a href="/pages/package_mine/my_wallet/main" class="item_page">
            钱包
            <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
          </a>
          <a href="/pages/package_mine/setting/main" class="item_page">
            邀请代理
            <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
          </a>
          <a href="/pages/package_mine/setting/main" class="item_page">
            我要进货
            <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
          </a>
          <a href="/pages/package_mine/setting/main" class="item_page">
            我的分享商
            <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
          </a>
          <a href="/pages/package_mine/setting/main" class="item_page">
            微信二维码
            <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
          </a>
          <a href="/pages/package_mine/feedback/main" class="item_page">
            意见反馈
            <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
          </a>
          <a href="/pages/package_mine/setting/main" class="item_page">
            联系总部
            <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
          </a>
          <a href="/pages/package_mine/setting/main" class="item_page">
            我的门票
            <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
          </a>
          <a href="/pages/package_mine/setting/main" class="item_page">
            设置
            <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_into.png'"
                v-if="img_baseurl"
                alt
                class="icon"
              />
          </a>
        </div>
        </div>
        <!-- 金币银币显示 -->
        <div class="coinbox">
          <ul class="ul">
            <li class="li">
              <a href="/pages/package_mine/card_centry/main">
                {{coinList.tickets_num}}
                <p class="coinname">卡券</p>
              </a>
            </li>
            <li class="li">
              <a href="/pages/package_mine/my_card_new/main">
                {{coinList.bankcard_num}}
                <p class="coinname">银行卡</p>
              </a>
            </li>
          </ul>

          <img
            :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/img.png'"
            v-if="img_baseurl"
            alt
            class="bgimg"
          />
          <div class="wallet">
            <a href="/pages/package_mine/my_wallet/main">
              <img
                :src="img_baseurl+'/mp_3.1.6/zone/xxhdpi/me_ic_wallet.png'"
                v-if="img_baseurl"
                alt
                class="img"
              />
              <p class="text">我的钱包</p>
            </a>
          </div>
        </div>
        <div class="nav">
          <div class="nav-item">
            <a href="/pages/package_mall/shop_cart/main">
              <div class="icon">
                <img
                  :src="img_baseurl+'/mp_2.9/me_ic_shop@2x.png'"
                  v-if="img_baseurl"
                  alt
                  class="img"
                />
              </div>
              <div class="msg">购物车</div>
            </a>
          </div>
          <div class="nav-item">
            <!-- /pages/my_collectionN/main -->
            <a href="/pages/package_mine/collection/main">
              <div class="icon">
                <img
                  :src="img_baseurl+'/mp_2.9/me_ic_collect@2x.png'"
                  v-if="img_baseurl"
                  alt
                  class="img"
                />
              </div>
              <div class="msg">收藏</div>
            </a>
          </div>
          <div class="nav-item">
            <a href="/pages/package_mine/my_protocal/main">
              <div class="icon">
                <img
                  :src="img_baseurl+'/mp_3.0/sign_in/Group 12 Copy 3@2x.png'"
                  v-if="img_baseurl"
                  alt
                  class="img"
                />
              </div>
              <div class="msg">我的协议</div>
            </a>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import imageUrl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      user_data: "",
      imgUrl: common.image_response,
      img_baseurl: common.image_resource,
      wait_pay: 0,
      wait_send: 0,
      wait_receive: 0,
      wait_evaluate: 0,
      province: 13,
      banner_arr: [],
      order_data: {},
      nav_arr: [],
      coinList: "",
    };
  },

  onLoad () {
    wx.setNavigationBarTitle({
      title: "我的"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#3EB0A9", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    let that = this;
    wx.getStorage({
      key: "user_token",
      success: res => {
        that.getData();
        that.get_nav();
      },
      fail: () => { }
    });
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        that.province = info.province_id;
        that.get_banner();
      },
      fail: () => { },
      complete: () => { }
    });
  },
  onShow () {
    let that = this;
    wx.getStorage({
      key: "user_token",
      success: res => {
        that.getData();
        that.get_nav();
      },
      fail: () => {
        wx.navigateTo({ url: "/pages/package_main/login/main" });
      }
    });
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        that.province = info.province_id;
        that.get_banner();
      },
      fail: () => { },
      complete: () => { }
    });
  },
  methods: {
    to_all_vip () {
      console.log(123654);
      wx.navigateTo({ url: "/pages/package_mine/all_vip/main" });
    },
    getData () {
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true //显示透明蒙层，防止触摸穿透
      });
      common.fly_post("api/v4_5/my_info_detail", {}, result => {
        let res = result.data;
        wx.hideLoading();
        if (res.status_code == 0) {
          wx.setStorageSync("user_data", res.data);
          this.user_data = res.data;
          this.order_data = res.data.my_order;
          this.user_data.username =
            this.user_data.username.substr(0, 3) +
            "****" +
            this.user_data.username.substr(7);
          this.coinList = res.data.wallet_data;
          // this.coinList[0].val = res.data.wallet_data.gold_coin;
          // this.coinList[1].val = res.data.wallet_data.silver_coin;
          // this.coinList[2].val = res.data.wallet_data.tickets_num;
          // this.coinList[3].val = res.data.wallet_data.bankcard_num;
        } else {
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
        }
      });
    },
    get_banner () {
      let that = this;
      common.fly_post(
        "/api/v4_5/home/banners",
        { cate_id: 7, province_id: this.province_id },
        result => {
          let res = result.data;
          that.banner_arr = res.data;
        }
      );
    },


    //h5签到
    to_h5 () {
      wx.navigateTo({
        url: "/pages/package_mine/sign_in/main"
      });
    },
    to_detail (item) {
      common.to_detail(item);
    },
    to_mybook () {
      wx.setStorageSync("project_order", "resListShow");
      wx.navigateTo({
        url:
          "/pages/package_projects/booking_new/main?showName=resListShow&&title=预约单"
      });
    },
    to_project_order () {
      wx.navigateTo({ url: "/pages/package_mine/project_order_list/main" });
    },
    to_myorder () {
      //跳转补贴单
      wx.setStorageSync("project_order", "objListShow");
      wx.navigateTo({
        url:
          "/pages/package_projects/booking_new/main?showName=objListShow&&title=补贴单"
      });
    },
    to_card_ticket_order () {
      wx.navigateTo({ url: "/pages/ct_store/card_ticket_order/main" });
    },
    invite () {
      wx.navigateTo({
        url:
          "/pages/package_main/advertisement/main?url=https://h5.ameimeika.com/invite_v2.1"
      });
    },
    // 跳转会员中心
    to_plus () {
      wx.navigateTo({
        url: `/pages/package_main/advertisement/main?url=${
          common.is_online
            ? "https://h5.ameimeika.com/mmk_member/#/"
            : "https://h5s.ameimeika.com/mmk_member/#/"
          }`
      });
    },
    // 获取导航
    get_nav () {
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true //显示透明蒙层，防止触摸穿透
      });
      common.fly_post("api/v4_5/my_center/recommend", {}, result => {
        let res = result.data;
        wx.hideLoading();
        if (res.status_code == 0) {
          this.nav_arr = res.data;
        } else {
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
        }
      });
    },
    to_web (item) {
      wx.navigateTo({
        url: `/pages/package_main/advertisement/main?url=${encodeURIComponent(
          item.h5_android
        )}`
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  .inner {
    padding-bottom: 98px;
    .top {
      width: 100%;
      background: #3eb0a9;
      position: relative;
      overflow: hidden;
      .top-info {
        margin-top: 23px;
        margin-left: 17px;
        margin-bottom: 40px;
        .logo {
          display: inline-block;
          vertical-align: middle;
          position: relative;
          .user-logo {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.48);
            display: inline-block;
            vertical-align: middle;
            position: relative;
            margin-right: 17px;
            overflow: hidden;
            .img {
              width: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border-radius: 50%;
            }
          }

          .img {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
          }
          .vip-icon {
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
        .user_nickname {
          display: inline-block;
          vertical-align: top;
          font-size: 19px;
          font-family: "PingFangSC-Medium", "PingFang SC";
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 28px;
          letter-spacing: 1px;
          margin-top: 3px;
          .user_tel {
            font-size: 14px;
            font-family: "PingFangSC-Regular", "PingFangSC";
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 18px;
            margin-top: 4px;
            opacity: 0.6;
            // .vip {
            //   width: 100px;
            //   height: 24px;
            //   display: inline-block;
            //   vertical-align: middle;
            //   margin-left: 20px;
            // }
          }
        }
      }
      .top-btn {
        width: 92px;
        background-color: transparent;
        position: absolute;
        right: 0;
        top: 55px;
        z-index: 10;
        .img {
          width: 100%;
          display: block;
        }
      }
      .top-setting {
        position: absolute;
        top: 20px;
        right: 15px;
        z-index: 10;
        .setting {
          width: 26px;
          height: 26px;
          display: block;
        }
      }
      .vip {
        width: 89.33%;
        height: 51px;
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 16px 14px 0;
        font-weight: 500;
        color: rgba(255, 224, 170, 1);
        font-size: 14px;
        .text1 {
          font-size: 10px;
          color: rgba(255, 224, 170, 0.5);
        }
        .text2 {
          font-size: 12px;
          color: rgba(255, 213, 138, 1);
          float: right;
        }
        .text3 {
          width: 68px;
          height: 20px;
          background: rgba(243, 194, 140, 1);
          border-radius: 12px;
          font-size: 12px;
          color: rgba(66, 30, 30, 1);
          float: right;
          line-height: 20px;
          box-sizing: border-box;
          padding: 0 6px;
          position: relative;
          .icon {
            width: 4px;
            height: 8px;
            position: absolute;
            top: 6px;
            right: 6px;
          }
        }
      }
    }
    .project-order {
      background-color: #fff;
      margin: 10px 10px 0;
      border-radius: 5px;
      .title {
        font-size: 16px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
        margin: 15px;
      }
      .order-list {
        height: 88px;
        // margin: 14px 10px 0;
        padding: 14px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f3f4f6;

        .order-item {
          flex: 1;
          .icon {
            width: 36px;
            height: 36px;
            margin: 0 auto;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .item-msg {
            margin-top: 6px;
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: #666;
            line-height: 18px;
            text-align: center;
            margin-bottom: 15px;
          }
        }
      }
    }
    .goods-order {
      height: auto;
      background-color: #fff;
      box-sizing: border-box;
      padding: 14px 0;
      border-radius: 5px;
      position: relative;
      .title {
        margin-bottom: 16px;
        font-size: 16px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: #333;
        line-height: 20px;
        box-sizing: border-box;
        padding: 0 14px;
      }
      .all-order {
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 18px;
        position: absolute;
        right: 16px;
        top: 16px;
        vertical-align: middle;
        .icon {
          width: 6px;
          height: 10px;
          display: inline-block;
          margin-left: 1.5px;
        }
      }
      .order-list {
        margin-top: 15px;
        justify-content: space-between;
        display: flex;
        .list-item {
          flex: 1;
          .icon {
            margin: 0 auto 6px;
            width: 30px;
            height: 30px;
            position: relative;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
            .tip {
              width: 16px;
              height: 16px;
              background: #ffffff;
              border: 1px solid #ef2929;
              text-align: center;
              border-radius: 8px;
              font-size: 12px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: #ef2929;
              position: absolute;
              top: 0;
              right: 0;
              transform: translate(50%, -50%);
            }
          }
          .msg {
            font-size: 12px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: #666;
            text-align: center;
          }
        }
      }
    }
    .order-banner {
      width: 94.66%;
      height: 75px;
      margin: 10px;
      border-radius: 5px;
      // margin-bottom: 15px;
      overflow: hidden;
      transform: translateY(0);
      swiper {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;
        transform: translateY(0);
      }
      .slide-image {
        width: 100%;
        border-radius: 7px;
      }
    }
    .nav {
      margin: 10px;
      padding-bottom: 15px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      display: flex;
      flex-wrap: wrap;
      columns: 4;
      .nav-item {
        width: 25%;
        margin-top: 15px;
        .icon {
          width: 30px;
          height: 30px;
          margin: 0 auto;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .msg {
          margin-top: 5px;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          text-align: center;
        }
      }
    }
    .coinbox {
      height: 72px;
      display: flex;
      background: #fff;
      margin: 10px;
      position: relative;
      border-radius: 5px;
      .ul {
        width: 77.5%;
        // background: red;
        .li {
          width: 25%;
          height: 100%;
          box-sizing: border-box;
          padding: 15px 0 14px;
          float: left;
          text-align: center;
          font-size: 16px;
          color: #333;
          font-size: 16px;
          font-weight: 600;
          .coinname {
            font-size: 12px;
            color: #666;
            margin-top: 6px;
            font-weight: 400;
          }
        }
      }
      .wallet {
        width: 22.5%;
        box-sizing: border-box;
        padding: 17px 0 14px 12px;
        text-align: center;
        .img {
          width: 24px;
          height: 24px;
          margin-bottom: -1px;
        }
        .text {
          font-size: 12px;
          color: rgba(102, 102, 102, 1);
        }
      }
      .bgimg {
        width: 4px;
        height: 58px;
        position: absolute;
        top: 8px;
        right: 21%;
      }
    }
  }
  .sign {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    right: 6px;
    z-index: 999;
    animation: shake 1.5s 1s infinite;
    // transition: all 3s;
    .image {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 50%;
    }
    .btn {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
      opacity: 0;
    }
  }
  .page_main{
    background: #fff;
    margin-top: -19px;
border-radius: 16px 16px 0px 0px;
    .item_page{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      border-bottom: 1px #EDEDED solid;
font-size: 15px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
img{
width: 6px;
height: 10px;

}
    }
  }
}
</style>